<template>
  <SystemItem title="锁定密码">
    <!-- 设置锁定密码 -->
    <div
      class="grid grid-cols-[120px_240px] gap-2 justify-between items-center pb-2"
      style="border-bottom: 1px solid var(--border)"
    >
      <div>设置锁定密码</div>
      <el-input
        v-model="lockData.password"
        type="password"
        show-word-limit
        show-password
        placeholder="请输入锁定密码"
        maxlength="10"
      ></el-input>
    </div>

    <!-- 设置密保 -->
    <div class="pt-2 flex flex-col gap-1">
      <div class="flex flex-row justify-between items-center">
        <div>设置密保</div>
        <el-button size="small" type="primary" @click="AddQuestion" :icon="Plus"></el-button>
      </div>
      <div class="max-h-[200px] min-h-[80px] flex flex-col justify-center items-center overflow-y-scroll">
        <el-empty description="暂无设置密保" :image-size="60" v-if="lockData.securityQuestionList.length === 0" />
        <template v-else>
          <div
            v-for="(item, index) in lockData.securityQuestionList"
            :key="index"
            class="w-full grid grid-cols-[1fr_30px] justify-center items-center gap-4 py-4"
            style="border-bottom: 1px solid var(--border)"
          >
            <div class="w-full flex flex-col gap-2">
              <div class="grid grid-cols-[40px_1fr] gap-2 items-center">
                <div>{{ item.label }}</div>
                <el-input></el-input>
              </div>
              <div class="grid grid-cols-[40px_1fr] gap-2 items-center">
                <div>答案</div>
                <el-input></el-input>
              </div>
            </div>
            <el-button type="danger" size="small" @click="DeleteQuestion(item)" :icon="Delete"></el-button>
          </div>
        </template>
      </div>
      <div class="text-end py-2">
        <el-button type="success" size="small" @click="Apply" :disabled="lockData.password == ''">应用</el-button>
      </div>
    </div>
  </SystemItem>
</template>

<script setup lang="ts">
import { ref } from "vue";
import SystemItem from "../components/SystemItem.vue";
import { useSystem } from "@/store/modules/system";
import { ILockScreenData, ISecurityQuestion } from "@/types/system";
import { storeToRefs } from "pinia";
import { Delete, Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const system = useSystem();
const { LockScreenData } = storeToRefs(system);
let lockData = ref<ILockScreenData>({
  password: LockScreenData.value.password,
  securityQuestionList: LockScreenData.value.securityQuestionList,
});
// 应用
function Apply() {
  if (lockData.value.password === "") return;
  ElMessage.success("设置成功");
  LockScreenData.value = lockData.value;
}

// 添加密保问题
function AddQuestion() {
  let obj: ISecurityQuestion = {
    label: `问题${lockData.value.securityQuestionList.length + 1}`,
    question: "",
    answer: "",
  };
  lockData.value.securityQuestionList.push(obj);
}

// 删除密保问题
function DeleteQuestion(item: ISecurityQuestion) {
  lockData.value.securityQuestionList = lockData.value.securityQuestionList.filter((q) => q != item);
}
</script>

<style lang="scss" scoped></style>
